@charset 'utf-8';

@import 'detail';

@import 'common';


.found-header{
    .mid-title{
        width: getRem(420px);
        text-align: center;     
        h4{
            font-weight: normal;
        }
    }
    .back-button{
        margin-left: getRem(23px);
    }
}

.found-section{
    .search-bar{
       width: getRem(269px);
        height: getRem(55px);
        border: 1px solid #ff9344;
        border-radius: 25px;
        padding: 0 getRem(12px);
        box-sizing: border-box;
        margin: 0 auto ;
        line-height: getRem(55px);
        font-size: 0;
    }
    .search-bar input{
        width: getRem(199px);
        height: getRem(50px);
        border: none;
        vertical-align: top;
        font-size: getRem(24px);
        border-radius: getRem(20px);
        outline: none;
        text-indent: getRem(4px);
        line-height: getRem(55px);
    }
    
    .search-bar i{
        font-size: getRem(34px);
        color: #ff9344; 
//      line-height: getRem(55px); 
        vertical-align: top;   
    }
}

.everyone-search{
    h4{
        width: 68%;
        height: getRem(50px);
        font-size: getRem(26px);
        font-weight: normal;
        text-align: center;
        margin: getRem(22px) auto 0;
    }
    ul{
        width: getRem(515px);
        height: getRem(130px);
        margin: 0 auto;
        li{
            float: left;
            width: getRem(124px);
            height: getRem(63px);
            background: #dcdcdc;
            line-height: getRem(63px);
            text-align: center;
            font-size: getRem(18px);
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
                color: #9b9b9b;               
            }
        }
        
        li:first-child~li{
            margin-left: getRem(6px);
            margin-bottom: getRem(6px);
        }
        li:first-child~li:nth-of-type(5){
            margin-left: 0px;
        }
        li:nth-of-type(5)~li{
            margin-bottom: 0px;
        }
        
    }
}



.favourite-top{
        width: 94%;
        margin: getRem(20px) auto 0;
        height: getRem(95px);
    }
    
.guess{
    width: getRem(211px);
    height: getRem(58px);
    float: left;
    font-size: getRem(29px);
    margin-top: getRem(36px);
    line-height: getRem(58px);
    .img_wrap{
        width: getRem(32px);
        height: getRem(46px);
        float: left;
        vertical-align: middle;
        img{
            width: 100%;
        }
    }
    h4{
        float: left;
        margin-left: getRem(8px);
        font-weight: normal;
        vertical-align: middle;
    }
}

.more{
    width: getRem(81px);
    height: getRem(57px);
    float: right;
    font-size: getRem(23px);
    margin-top: getRem(36px);
    line-height: getRem(57px);
    i{
        float: left;
        font-size: getRem(25px);
        color: $defaultcolor;
        vertical-align: middle;
    }
    h4{
        float: left;
        font-weight: normal;
        vertical-align: middle;
    }
}


.hot-search{
    width: 95%;
    margin: getRem(32px) auto 0;
    .left{
        width: getRem(278px);
        height: getRem(351px);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .right-top{
        width: getRem(419px);
        height: getRem(147px);
        padding-left: getRem(10px);
//      padding-bottom: getRem(5px);
        
        img{
            width: 100%;
            height: 100%;
        }
    }
    .right-bottom-left{
        width: getRem(196px);
        height: getRem(196px);
        padding-left: getRem(10px);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .right-bottom-right{
        width: getRem(211px);
        height: getRem(196px);
        padding-left: getRem(10px);
        img{
            width: 100%;
            height: 100%;
        }
    }
}


.recommend{
    width: 95%;
//  width: getRem(706px);
    margin: getRem(49px) auto 0;
    .left-img{
        width: getRem(227px);
        height: getRem(200px);
        float: left;
//      box-sizing: border-box;
        a{
           width: 100%;
           height: 100%;
          // display: inline-block;
           img{
            width: 100%;
            height: 100%;
           }
        }
    }
    .mid-img{
        width: getRem(211px);
        height: getRem(200px);
        float: left;
//      box-sizing: border-box;
        padding-left: getRem(17px);
        a{
           width: 100%;
           height: 100%;
           //display: inline-block;
           img{
            width: 100%;
           }
        }
    }
    .right-img{
        width: getRem(220px);
        height: getRem(200px);
//      box-sizing: border-box;
        padding-left: getRem(19px);
        float: left;
        a{
           //display: inline-block;
           width: 100%;
           height: 100%;
           img{
            width: 100%;
           }
        }
    }
}


.found-fav-top{
    margin: 0 auto;
}
